<!DOCTYPE html>
<html>

<head>
  <style>
    #myArea {
      width: 200px;
      height: 200px;
      background-color: #ddd;
      position: relative;
      left: 0;
      top: 0;
      cursor: move;
    }
  </style>
</head>

<body>
  <div id="myArea">
    <!-- 在这里放置你的区域内容 -->
  </div>

  <script>
    var area = document.getElementById("myArea");
    var isDragging = false;
    var offsetX, offsetY;

    // 鼠标按下事件
    area.addEventListener("mousedown", function (event) {
      isDragging = true;
      offsetX = event.clientX - area.offsetLeft;
      offsetY = event.clientY - area.offsetTop;
      area.style.cursor = "grabbing"; // 拖拽时更改光标样式
    });

    // 鼠标移动事件
    document.addEventListener("mousemove", function (event) {
      if (isDragging) {
        var x = event.clientX - offsetX;
        var y = event.clientY - offsetY;
        area.style.left = x + "px";
        area.style.top = y + "px";
      }
    });

    // 鼠标放开事件
    document.addEventListener("mouseup", function (event) {
      isDragging = false;
      area.style.cursor = "move"; // 恢复默认光标样式
    });
  </script>
</body>

</html>